import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Toast, NavBar } from 'react-vant';
import '../../scss/lwl/history.css'
import { Ellipsis } from '@nutui/nutui-react'
import { Delete } from '@react-vant/icons';
export default function History() {
    const jump = useNavigate()
    const [arr, setArr] = useState([])
    const getHis = async () => {
        let { data: { history } } = await axios.get('http://localhost:3000/history')
        setArr(history)
    }
    useEffect(() => {
        getHis()
    }, [])
    const [flag,setFlag]=useState('none')
    const del=async(id)=>{
        await axios.delete(`http://localhost:3000/historydel/${id}`)
        getHis()
    }

    const jumpDetail = (id,lid) => {
        jump(`/detail?id=${id}&lid=${lid}`)
    }
    return (
        <div id='History'>
            <NavBar
                title="浏览历史"
                leftText="返回"
                rightText="删除"
                onClickLeft={() => { jump('/') }}
                onClickRight={() => {if(flag==='none'){setFlag('block')}else{setFlag('none')}}}
            />
            <div className="history_list">
                {arr.map(item => (
                    <div className='list_item' key={item._id} onClick={()=>{jumpDetail(item._id,item.lid)}}>
                        <div className='list_img'>
                            <img src="./fangjian5.png" alt="" />
                        </div>
                        <div className='list_con'>
                            <p>
                                <Ellipsis rows={2} style={{ fontSize: '16px' }} content={item.classfy + item.name + ' ' + item.describe}></Ellipsis>
                            </p>
                            <p style={{ marginTop: '5px',marginBottom:'5px' }}>
                                <Ellipsis style={{ fontSize: '12px' }} content={item.house_type + item.house_area + 'm²' + item.plot} ></Ellipsis>
                            </p>
                            {item.tip.slice(0, 3).map((ele, index) => (
                                <span key={index} style={{ fontSize: '12px', marginRight: '10px', background: 'skyblue' }}>{ele}</span>
                            ))} <br></br>
                            <p style={{marginTop:'5px'}}>
                            <span style={{ fontSize: '21px', color: '#f57c00'}}>{item.price}/月</span>
                            <span style={{float:'right',display:flag}}onClick={()=>{del(item._id)}}><Delete fontSize={25}/></span>
                            </p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
